<template>
  <view class="calendar-container">
    <!-- 顶部栏 -->
    <view class="header">
      <text class="header-title">日历</text>
      <view class="header-actions">
        <view class="action-btn" @tap="showToday">
          <text class="action-text">今天</text>
        </view>
        <view class="action-btn" @tap="showCalendarMenu">
          <text class="action-icon">•••</text>
        </view>
      </view>
    </view>
    
    <!-- 日历控制栏 -->
    <view class="calendar-header">
      <view class="calendar-nav">
        <view class="nav-btn" @tap="prevMonth">
          <text class="nav-icon">←</text>
        </view>
        <view class="current-date" @tap="showMonthPicker">
          <text class="date-text">{{ currentYear }}年{{ currentMonth }}月</text>
        </view>
        <view class="nav-btn" @tap="nextMonth">
          <text class="nav-icon">→</text>
        </view>
      </view>
    </view>
    
    <!-- 星期标题 -->
    <view class="weekdays">
      <view class="weekday" v-for="(day, index) in weekdays" :key="index">
        <text class="weekday-text">{{ day }}</text>
      </view>
    </view>
    
    <!-- 日历主体 -->
    <view class="calendar-grid">
      <view v-for="(day, index) in calendarDays" :key="index" 
            class="calendar-day" 
            :class="{ 
              'other-month': day.otherMonth, 
              'current-day': day.isToday, 
              'has-event': day.hasEvent, 
              'selected-day': day.isSelected 
            }" 
            @tap="selectDay(day)">
        <text class="day-text">{{ day.day }}</text>
        <view v-if="day.hasEvent" class="event-dot"></view>
      </view>
    </view>
    
    <!-- 今日事件预览 -->
    <view class="today-events" v-if="hasTodayEvents">
      <view class="events-header">
        <text class="events-title">今日事件</text>
        <text class="events-more" @tap="showAllEvents">查看全部</text>
      </view>
      <view class="events-list">
        <view v-for="(event, index) in todayEvents" :key="index" class="event-item" @tap="openEventDetail(event)">
          <view class="event-time">
            <text class="event-hour">{{ event.time }}</text>
          </view>
          <view class="event-content">
            <text class="event-title">{{ event.title }}</text>
            <text class="event-location">{{ event.location }}</text>
          </view>
          <view class="event-status" :class="event.status"></view>
        </view>
      </view>
    </view>
    
    <!-- 浮动按钮 -->
    <view class="floating-btn" @tap="addNewEvent">
      <text class="btn-icon">+</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentYear: new Date().getFullYear(),
      currentMonth: new Date().getMonth() + 1,
      selectedYear: new Date().getFullYear(),
      selectedMonth: new Date().getMonth() + 1,
      selectedDay: new Date().getDate(),
      weekdays: ['日', '一', '二', '三', '四', '五', '六'],
      calendarDays: [],
      todayEvents: [],
      hasTodayEvents: true,
      // 模拟事件数据
      events: [
        {
          id: 1,
          title: '产品设计评审',
          time: '10:00',
          location: '线上会议',
          status: 'upcoming',
          date: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())
        },
        {
          id: 2,
          title: '前端开发讨论',
          time: '14:30',
          location: '会议室A',
          status: 'upcoming',
          date: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())
        },
        {
          id: 3,
          title: '周报提交',
          time: '16:00',
          location: '工位',
          status: 'completed',
          date: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())
        },
        {
          id: 4,
          title: '团队建设活动',
          time: '18:30',
          location: '团建地点',
          status: 'upcoming',
          date: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 1)
        },
        {
          id: 5,
          title: '代码审查',
          time: '15:00',
          location: '线上会议',
          status: 'upcoming',
          date: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 2)
        }
      ]
    };
  },
  onLoad() {
    this.generateCalendar();
    this.updateTodayEvents();
  },
  methods: {
    // 生成日历数据
    generateCalendar() {
      const firstDay = new Date(this.currentYear, this.currentMonth - 1, 1);
      const lastDay = new Date(this.currentYear, this.currentMonth, 0);
      const startDay = new Date(firstDay);
      startDay.setDate(startDay.getDate() - startDay.getDay());
      
      const days = [];
      const today = new Date();
      const isCurrentMonth = today.getFullYear() === this.currentYear && 
                            today.getMonth() + 1 === this.currentMonth;
      
      // 生成42天 (6周) 的日历
      for (let i = 0; i < 42; i++) {
        const currentDate = new Date(startDay);
        currentDate.setDate(startDay.getDate() + i);
        
        const day = {
          day: currentDate.getDate(),
          year: currentDate.getFullYear(),
          month: currentDate.getMonth() + 1,
          otherMonth: currentDate.getMonth() + 1 !== this.currentMonth,
          isToday: isCurrentMonth && currentDate.getDate() === today.getDate(),
          isSelected: this.selectedYear === currentDate.getFullYear() && 
                      this.selectedMonth === currentDate.getMonth() + 1 && 
                      this.selectedDay === currentDate.getDate(),
          hasEvent: this.checkHasEvent(currentDate)
        };
        
        days.push(day);
      }
      
      this.calendarDays = days;
    },
    
    // 检查某天是否有事件
    checkHasEvent(date) {
      return this.events.some(event => 
        event.date.getFullYear() === date.getFullYear() &&
        event.date.getMonth() === date.getMonth() &&
        event.date.getDate() === date.getDate()
      );
    },
    
    // 选择日期
    selectDay(day) {
      if (day.otherMonth) return;
      
      this.selectedYear = day.year;
      this.selectedMonth = day.month;
      this.selectedDay = day.day;
      
      // 更新日历选中状态
      this.generateCalendar();
      
      // 显示选中日期的事件
      this.showDayEvents(day.year, day.month, day.day);
    },
    
    // 上一个月
    prevMonth() {
      this.currentMonth--;
      if (this.currentMonth < 1) {
        this.currentMonth = 12;
        this.currentYear--;
      }
      this.generateCalendar();
    },
    
    // 下一个月
    nextMonth() {
      this.currentMonth++;
      if (this.currentMonth > 12) {
        this.currentMonth = 1;
        this.currentYear++;
      }
      this.generateCalendar();
    },
    
    // 显示今天
    showToday() {
      const today = new Date();
      this.currentYear = today.getFullYear();
      this.currentMonth = today.getMonth() + 1;
      this.selectedYear = today.getFullYear();
      this.selectedMonth = today.getMonth() + 1;
      this.selectedDay = today.getDate();
      
      this.generateCalendar();
      this.updateTodayEvents();
    },
    
    // 显示月份选择器
    showMonthPicker() {
      uni.showActionSheet({
        itemList: ['2023年', '2024年', '2025年'],
        success: (res) => {
          const year = 2023 + res.tapIndex;
          this.currentYear = year;
          this.selectedYear = year;
          this.generateCalendar();
        }
      });
    },
    
    // 显示日历菜单
    showCalendarMenu() {
      uni.showActionSheet({
        itemList: ['日视图', '周视图', '月视图', '日程列表'],
        success: (res) => {
          if (res.tapIndex === 3) {
            this.navigateToEventList();
          } else {
            uni.showToast({
              title: `切换到${['日视图', '周视图', '月视图'][res.tapIndex]}`,
              icon: 'none'
            });
          }
        }
      });
    },
    
    // 更新今日事件
    updateTodayEvents() {
      const today = new Date();
      this.todayEvents = this.events.filter(event => 
        event.date.getFullYear() === today.getFullYear() &&
        event.date.getMonth() === today.getMonth() &&
        event.date.getDate() === today.getDate()
      );
      
      this.hasTodayEvents = this.todayEvents.length > 0;
    },
    
    // 显示选中日期的事件
    showDayEvents(year, month, day) {
      const selectedDate = new Date(year, month - 1, day);
      const dayEvents = this.events.filter(event => 
        event.date.getFullYear() === selectedDate.getFullYear() &&
        event.date.getMonth() === selectedDate.getMonth() &&
        event.date.getDate() === selectedDate.getDate()
      );
      
      if (dayEvents.length > 0) {
        let eventList = '';
        dayEvents.forEach(event => {
          eventList += `\n${event.time} ${event.title}`;
        });
        
        uni.showModal({
          title: `${year}年${month}月${day}日`,
          content: `今日有 ${dayEvents.length} 个事件：${eventList}`,
          showCancel: false,
          confirmText: '查看详情'
        });
      } else {
        uni.showToast({
          title: '当天没有事件',
          icon: 'none'
        });
      }
    },
    
    // 显示所有事件
    showAllEvents() {
      this.navigateToEventList();
    },
    
    // 打开事件详情
    openEventDetail(event) {
      uni.navigateTo({
        url: `/pages/demo/event?id=${event.id}&title=${encodeURIComponent(event.title)}`
      });
    },
    
    // 添加新事件
    addNewEvent() {
      uni.navigateTo({
        url: '/pages/demo/add-event'
      });
    },
    
    // 导航到事件列表
    navigateToEventList() {
      uni.navigateTo({
        url: '/pages/demo/events-list'
      });
    }
  }
};
</script>

<style scoped>
.calendar-container {
  height: 100vh;
  background-color: #f8f9fc;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding-bottom: 100rpx;
}

/* 顶部栏 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.header-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.header-actions {
  display: flex;
  align-items: center;
}

.action-btn {
  margin-left: 30rpx;
}

.action-text {
  font-size: 28rpx;
  color: #667eea;
}

.action-icon {
  font-size: 32rpx;
  color: #333;
}

/* 日历控制栏 */
.calendar-header {
  background-color: #fff;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.calendar-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40rpx;
}

.nav-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-icon {
  font-size: 28rpx;
  color: #333;
}

.current-date {
  padding: 0 20rpx;
}

.date-text {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

/* 星期标题 */
.weekdays {
  display: flex;
  background-color: #fff;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.weekday {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.weekday-text {
  font-size: 28rpx;
  color: #666;
}

/* 日历主体 */
.calendar-grid {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.calendar-day {
  width: 14.2857%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.day-text {
  font-size: 28rpx;
  color: #333;
}

.other-month .day-text {
  color: #ccc;
}

.current-day {
  background-color: #07c160;
  border-radius: 50%;
}

.current-day .day-text {
  color: #fff;
  font-weight: 600;
}

.selected-day {
  border: 2rpx solid #667eea;
  border-radius: 50%;
}

.has-event .event-dot {
  position: absolute;
  bottom: 10rpx;
  width: 12rpx;
  height: 12rpx;
  background-color: #ff4d4f;
  border-radius: 50%;
}

.other-month .event-dot {
  background-color: #ccc;
}

/* 今日事件 */
.today-events {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.events-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.events-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.events-more {
  font-size: 26rpx;
  color: #667eea;
}

.events-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.event-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f2f2f2;
}

.event-item:last-child {
  border-bottom: none;
}

.event-time {
  width: 100rpx;
  margin-right: 20rpx;
}

.event-hour {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

.event-content {
  flex: 1;
}

.event-title {
  font-size: 30rpx;
  color: #333;
  display: block;
  margin-bottom: 5rpx;
}

.event-location {
  font-size: 24rpx;
  color: #999;
}

.event-status {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
}

.event-status.upcoming {
  background-color: #07c160;
}

.event-status.completed {
  background-color: #ccc;
}

/* 浮动按钮 */
.floating-btn {
  position: fixed;
  right: 40rpx;
  bottom: 140rpx;
  width: 100rpx;
  height: 100rpx;
  background-color: #667eea;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
}

.btn-icon {
  font-size: 48rpx;
  color: #fff;
  line-height: 1;
}
</style>